<template>
  <div class="p10">
    <CustomTable
      ref="customTableRef"
      url="/file/search/export-list"
      :searchInfo="searchInfo"
      :loading="true"
      :selection="true"
      @handleSelectionChange="handleSelectionChange"
      methods="post"
      :columns="columns"
    >
      <template #exportStatus="{ data }">
        <span>导出{{ data.exportStatus === 1 ? "成功" : "失败" }}</span>
      </template>
      <template #downStatus="{ data }">
        <el-tag :type="data.downStatus === 0 ? '' : 'danger'"
          ><span>{{
            data.downStatus === 0 ? " 待下裁" : "已下载"
          }}</span></el-tag
        >
      </template>
      <template #searchPre="{ data }">
        <span class="fs12 o07 mr6" v-if="state.selectedData.length"
          >已选择{{ state.selectedData.length }}条数据</span
        >
        <el-button
          size="small"
          :title="!state.selectedData.length ? '请选择需要下载的数据' : null"
          :disabled="!state.selectedData.length"
          @click="handleDownload(data)"
          class="cp c-1989fa fs12"
          type="warning"
        >
          下载
        </el-button>
      </template>
      <template #option="{ data }">
        <el-button link type="primary" size="small" @click="handleDelete(data)"
          >删除</el-button
        >
      </template>
    </CustomTable>
  </div>
</template>
<script setup name="DownloadFile">
import { removeFile } from "@/api/uploadFile";
import { formatDate } from "@/utils";
import { getToken } from "@/utils/auth";
import axios from "axios";
import { ElMessageBox } from "element-plus";
import { getCurrentInstance, provide, reactive, ref } from "vue";

const url = import.meta.env.VITE_APP_BASE_API;

const { proxy } = getCurrentInstance();
const customTableRef = ref();
const searchInfo = ref([
  { key: "fileName", label: "文件名" },
  {
    key: "downStatus",
    label: "状态",
    type: "select",
    options: [
      { label: "待下载", value: 0 },
      { label: "已下载", value: 1 },
    ],
  },
]);
const columns = ref([
  {
    prop: "fileName",
    width: 260,
    label: "文件名",
    fixed: "left",
  },
  {
    prop: "downStatus",
    width: 180,
    label: "下载状态",
  },
  {
    prop: "exportStatus",
    minWidth: 80,
    label: "导出状态",
  },
  {
    prop: "createBy",
    minWidth: 100,
    label: "操作人",
  },
  {
    prop: "createTime",
    minWidth: 180,
    label: "创建时间",
  },
  //  {
  //   prop: 'exportCnt',
  //   minWidth: 112,
  //   label: '导出次数'
  // },
  {
    prop: "option",
    label: "操作",
  },
]);

const handleDelete = (row) => {
  console.log(row);
  ElMessageBox.confirm(`删除文件"${row.fileName}"?`, "提示").then(() => {
    removeFile({
      id: row.id,
    }).then(() => {
      customTableRef.value.fetchData();
    });
  });
};

const handleDownload = async (data) => {
  proxy.$modal.loading("数据导出中……");
  //   proxy.download("file/export/downloadCompanyInfo/12", {
  // }, `post_${new Date().getTime()}.zip`);
  const response = await axios({
    methods: "get",
    timeout: 1000000,
    headers: {
      Authorization: "Bearer " + getToken(),
      "Content-Type": "multipart/form-data",
    },
    url: `${url}/file/export/downloadCompanyInfo/${state.selectedData
      .map(({ id }) => id)
      .toString()}`,
    responseType: "blob",
  });
  console.log(response);
  const blob = await new Blob([response.data], { type: "application/zip" });
  // 创建隐藏的可下载链接
  const objectUrl = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  // 地址
  a.href = objectUrl;
  // 修改文件名
  a.download = `公司信息_${formatDate(Date.now())}.zip`;
  // 触发点击
  document.body.appendChild(a);
  a.click();
  // 移除
  window.URL.revokeObjectURL(blob);
  customTableRef.value.fetchData(); //  刷新列表
  setTimeout(() => {
    document.body.removeChild(a);
    proxy.$modal.closeLoading();
  }, 1000);
};
const state = reactive({
  visible: false,
  id: null,
  activeName: "1",
  selectedData: [],
});
const handleSelectionChange = (e) => {
  console.log(e);
  state.selectedData = e;
};
provide("state", state);
</script>
<style scoped></style>
